<template>
	<view class="container">
		<view class="qrcode" :style="{ height: qrcodeBoxHeight }">
			<!--  -->
			<u-image :width="imageSize.width" :height="imageSize.height" @load="qrcodeLoaded" mode="aspectFit" :src="qrcode" @click="previewImage"><u-loading slot="loading"></u-loading></u-image>
		</view>
		<view class="qrcode-foot">
			<!-- #ifndef APP-PLUS -->
			<view class="qrcode-foot-btn" @tap="copyShareUrl" style="background: linear-gradient(to right, #fac905 0, #ff9500 100%);">复制邀请链接</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="qrcode-foot-btn" @tap="openSharePopup" style="background: linear-gradient(to right, #fac905 0, #ff9500 100%);">分享二维码</view>
			<!-- #endif -->
			<view class="qrcode-foot-btn" @tap="saveShareImage">保存海报</view>
		</view>
	</view>
</template>

<script>
import ShareMixin from '@/mixins/share-mixins.js';
import ShareTypeEnum from '@/utils/enum/ShareType.js';
import Tools from '@/utils/Tools.js';
import Share from '@/utils/Share.js';
export default {
	mixins: [ShareMixin],
	data() {
		return {
			qrcode: '',
			share_url: '',
			windowHeight: null,
			qrcodeHeight: null,
			qrcodeBoxHeight: null,
			isLoad: false,
			code: '',
			imageSize: {
				width: '588.5',
				height: '1000'
			},
			shareParam: {
				object_type: ShareTypeEnum.PLATFORM.value,
				object_id: 0,
				object_path: 'pages/index/index',
				object_query: ''
			}
		};
	},
	onLoad() {
		// 获取推广二维码
		this.getPoster();
	},
	onShow() {
		this.initShareMessage();
	},
	watch: {
		qrcode: function(newValue, oldValue) {
			if (newValue && newValue != oldValue) {
				uni.getImageInfo({
					src: newValue,
					success: e => {
						const detailHeight = e.height;
						const detailWidth = e.width;
						const detailRatio = detailHeight / detailWidth; // 图片比例

						let systemInfo = wx.getSystemInfoSync();
						let footHeight = uni.upx2px(100); // tap高度
						this.windowHeight = systemInfo.windowHeight;
						this.qrcodeBoxHeight = systemInfo.windowHeight - footHeight + 'px'; //二维码容器的高度

						let qrcodeBoxWidth = systemInfo.windowWidth - uni.upx2px(100);

						let imageHeigth = detailRatio * qrcodeBoxWidth;
						if (imageHeigth < this.qrcodeBoxHeight - uni.upx2px(100)) {
							this.$set(this.imageSize, 'height', imageHeigth + 'px');
							this.$set(this.imageSize, 'width', qrcodeBoxWidth + 'px');
						} else {
							let imageHeigth = this.qrcodeBoxHeight - uni.upx2px(100);
							let imageWidth = imageHeigth / detailRatio;
							this.$set(this.imageSize, 'width', imageWidth + 'px');
							this.$set(this.imageSize, 'height', imageHeigth + 'px');
						}
					}
				});
			}
		}
	},
	methods: {
		/**
		 * 获取推广二维码尺寸
		 */
		qrcodeLoaded(e) {
			console.log(e);
			return false;
		},
		/**
		 * 获取推广二维码
		 */
		getPoster() {
			this.$u.api.getUserQRCode().then(res => {
				const result = res.data.result;
				this.qrcode = result.qrcode;
				this.share_url = result.share_url;
				this.isLoad = true;
			});
		},

		previewImage() {
			uni.previewImage({
				current: this.qrcode,
				urls: [this.qrcode]
			});
		},
		// #ifndef APP-PLUS
		copyShareUrl() {
			Share.send(this.share_url);
		},
		// #endif

		// #ifdef APP-PLUS
		openSharePopup() {
			this.appSharePopup.show();
		},
		// #endif

		saveShareImage() {
			// #ifdef H5
			Tools.showError('平台不支持下载推广海报，请长按图片下载');
			// #endif
			// #ifndef H5
			uni.downloadFile({
				url: this.qrcode, //仅为示例，并非真实的资源
				success: res => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									icon: 'none',
									title: '推广海报下载成功'
								});
							}
						});
					}
				}
			});

			// #endif
		}
	}
};
</script>

<style>
page {
	background: #fff;
}
.container {
	position: relative;
}
.qrcode {
	padding: 50rpx;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
	height: 750rpx;
	width: 750rpx;
}
.qrcode image {
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
	border-radius: 12rpx;
}
.qrcode-foot {
	position: fixed;
	height: 100rpx;
	width: 750rpx;
	display: flex;
	bottom: 0;
	justify-content: space-between;
	padding: 0 50rpx;
	box-sizing: border-box;
}
.qrcode-foot-btn {
	width: 300rpx;
	height: 70rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
	border-radius: 12rpx;
	font-size: 26rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
	color: #fff;
}
</style>
